<template>
  <section class="news">
    <header class="title">
      <span>新闻动态</span>
    </header>
    <div class="news-content" v-if="dataList && dataList.length">
      <!-- 轮播图 -->
      <div class="image">
        <el-carousel
          v-if="dataList && dataList.length > 2"
          :interval="300000"
          type="card"
          class="carousel"
          style="width: 100%; height: 100%; overflow: hidden"
          height="90%"
          @change="changeCardIndex"
        >
          <el-carousel-item v-for="(item, index) in dataList.slice(0, 3)" :key="item.id">
            <div
              class="image-comtainer"
              @click.stop="detailClick(item.id)"
              :style="{ padding: state.cardIndex === index ? '0 10px' : '' }"
            >
              <img
                v-if="item.news_picture"
                fit="fit"
                :src="item.news_picture"
                style="height: 100%; width: 100%"
                alt="新闻图片"
              />
              <div v-else class="img-set">
                <span>暂无图片</span>
              </div>
            </div>
          </el-carousel-item>
        </el-carousel>
        <el-carousel
          v-else
          indicator-position="outside"
          style="width: 100%; height: 100%; overflow: hidden"
          height="90%"
        >
          <el-carousel-item v-for="item in dataList" :key="item.id">
            <div class="image-comtainer">
              <img
                v-if="item.news_picture"
                :src="item.news_picture"
                style="height: 100%; width: 100%"
                alt="新闻图片"
              />
              <div v-else class="img-set">
                <span>暂无图片</span>
              </div>
            </div>
          </el-carousel-item>
        </el-carousel>
        <div class="image-text">
          {{ dataList[state.cardIndex].news_title }}
        </div>
      </div>
      <!-- 新闻词条 -->
      <div class="text">
        <ul class="notice">
          <li
            class="notice-item"
            v-for="item in dataList"
            :key="item.id"
            @click.stop="detailClick(item.id)"
          >
            <div class="data-text">{{ item.created_at.slice(5, 10) }}</div>
            <div class="text-content">{{ item.news_title }}</div>
          </li>
        </ul>
      </div>
    </div>
    <el-empty v-else description="暂无数据" :image-size="100"></el-empty>
  </section>
  <!-- 新闻详情 -->
  <Detail
    :dialog="state.detailVisible"
    :activeList="activeList"
    @handle-close-click="handleClose"
  ></Detail>
</template>

<script lang="ts" setup>
import { getNewsList } from '@/apis/system/news'
import { ref, reactive } from 'vue'
import { Itype } from '@/type/index'
import Detail from './components/Detail.vue'
import { ElMessage } from 'element-plus'
const state = reactive({
  //弹窗显示
  detailVisible: false,
  //放大预览
  fullScreenVisible: false,
  //轮播图下标
  cardIndex: 0
})
/**
 * @desc:关闭dialog
 */
const handleClose = () => {
  state.detailVisible = false
}
/**
 * @desc:获取新闻数据
 *
 */
let search: Itype = ref()
const loading = ref(false)
let dataList: Itype = ref([])
const getData = () => {
  loading.value = true
  let params = {}
  getNewsList(params)
    .then((res) => {
      if (res.rows) {
        dataList.value = res.rows
        dataList.value.forEach((element: Itype) => {
          element.created_at = new Date(
            +new Date(new Date(element.created_at).toJSON()) + 8 * 3600 * 1000
          )
            .toISOString()
            .replace(/T/g, ' ')
            .replace(/\.[\d]{3}Z/, '')
        })
        loading.value = false
      }
    })
    .catch(() => {
      ElMessage('服务器内部错误')
    })
}
getData()
/**
 * @desc:获取新闻详情
 *
 */
let activeList: Itype = ref([])
let index = ref(0)
const detailClick = (id: number) => {
  state.detailVisible = true
  index.value = id
  dataList.value.forEach((element: Itype) => {
    if (element.id === index.value) {
      activeList.value = element
    }
  })
}
/**
 * @desc:切换轮播
 *
 */
const changeCardIndex = (data: number) => {
  state.cardIndex = data
}
</script>

<style lang="less" scoped>
.news {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 49%;
  padding: 16px 20px;
  box-sizing: border-box;
  background: #fff;
  border-radius: 8px;
  .title {
    color: #2a2f3d;
    font-size: 16px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: bold;
    line-height: 24px;
    letter-spacing: 1px;
  }
  .news-content {
    overflow: hidden;
    position: relative;
    width: 100%;
    height: 100%;
    margin-top: 10px;
    .image {
      position: relative;
      width: 100%;
      height: 70%;
      .image-comtainer {
        position: relative;
        overflow: hidden;
        width: 100%;
        height: 100%;
        background-color: #fff;
        box-sizing: border-box;
        img {
          width: 100%;
          height: 100%;
        }
        .img-set {
          display: flex;
          justify-content: center;
          align-items: center;
          width: 100%;
          height: 100%;
          span {
            color: #999;
          }
        }
      }
      .image-text {
        overflow: hidden;
        position: absolute;
        bottom: 10%;
        width: 100%;
        height: 22px;
        padding: 0 10px;
        box-sizing: border-box;
        line-height: 22px;
        color: #fff;
        font-size: 14px;
        background-color: rgba(0, 0, 0, 0.2);
        text-align: left;
        text-align: center;
        border-radius: 0 0 6px 6px;
        text-overflow: ellipsis;
        white-space: nowrap;
        z-index: 10;
      }
    }
    .text {
      position: relative;
      flex: 1;
      height: 100%;
      .notice {
        overflow: auto;
        width: 100%;
        height: 33.33%;
        .notice-item {
          display: flex;
          justify-content: space-between;
          width: 100%;
          padding: 2px 0px;
          box-sizing: border-box;
          .data-text {
            overflow: hidden;
            height: 18px;
            margin-top: 2px;
            padding: 0 4px;
            background-color: #ddf1fb;
            color: #31b4f5;
            font-size: 12px;
            line-height: 18px;
            font-weight: 550;
            font-family: YouSheBiaoTiHei;
            border-radius: 2px;
          }
          .text-content {
            overflow: hidden;
            flex: 1;
            padding-left: 6px;
            box-sizing: border-box;
            line-height: 22px;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
        }
      }
    }
  }
}
</style>
